import { PureComponent } from "react"
import { TextareaItem } from "antd-mobile"
import MToast from "../Util/MToast"
import { isNull, handleInputFocusBlur } from "../../utils/helper"

interface Props {
	isReset: boolean,
	getFieldDecorator: Function,
	field: string[],
	defaultFormData: object,
	label?: string,
	required?: any,
	place_holder?: string,
	disabled?: any,
	readonly?: any,
	show_label?: any,
	tips?: string,
	max_length?: any,
	label_width?: any,
	rows?: any,
	auto_height?: any,
	label_text_color?: string,
	label_text_align?: any,
	required_no_star?:any
}
interface State {
	hasError: boolean,
	errorMsg: string
}
export default class MiTextarea extends PureComponent<Props, State> {
	public state: State = {
		hasError: false,
		errorMsg: ""
	}
	componentWillReceiveProps(next: Props) {
		let { isReset: oldReset } = this.props;
		let { isReset: newReset } = next;
		if (oldReset !== newReset && newReset) {
			this.setState({
				hasError: false
			})
		}
	}

	render() {
		let { getFieldDecorator, field, defaultFormData, label, required, place_holder, disabled, readonly, show_label, tips, max_length, label_width = 5, rows = 3, auto_height = 0, label_text_color, label_text_align = "left",required_no_star } = this.props;
		let isDisabled = disabled == 1;
		let isReadonly = readonly == 1;
		let isShowLabel = isNull(show_label) || show_label == 1
		let isAutoHeight = auto_height == 1;
		let { hasError } = this.state;
		let isRequired = required == 1;
		let requiredClass = "mi-textarea"
		if (isRequired && required_no_star!=1) {
			requiredClass += " required"
		}
		let extra;
		if (!isShowLabel) {
			requiredClass += " no-label"
		}
		return (
			<div>
				<div data-flex="dir:left box:first" style={{ paddingRight: '15px' }}>
					<div style={{ width: "15px", lineHeight: "40px" }}>
						{
							isRequired&& required_no_star!=1 && <p style={{ color: "#f5222d", fontSize: "14px", textAlign: "center", fontFamily: "SimSun" }}>*</p>
						}
					</div>
					<div>
						{
							isShowLabel && <p style={{ lineHeight: "40px", fontSize: "16px", width: label_width * 17 + "px", textAlign: label_text_align, color: label_text_color }}>{label}:</p>
						}
						{
							getFieldDecorator(field[0], {
								initialValue: defaultFormData[field[0]],
								rules: [{
									validator: (rule, value, callback) => {
										if (isRequired) {
											if (isNull(value)) {
												// if (!hasError) {
													this.setState({
														hasError: true,
														errorMsg: "请输入：" + label
													})
													callback("请输入：" + label)
												// }
											}
											else {
												this.setState({
													hasError: false,
													errorMsg: ""
												})
												callback()
											}
										}
										callback()
									}
								}]
							})(
								<TextareaItem
									className={requiredClass}
									placeholder={place_holder}
									error={hasError}
									onErrorClick={() => {
										MToast.info(this.state.errorMsg, 1, null, false)
									}}
									disabled={isDisabled}
									editable={!isReadonly}
									count={max_length}
									rows={rows}
									autoHeight={isAutoHeight}
									onFocus={() => {
										handleInputFocusBlur()
									}}
									onBlur={() => {
										handleInputFocusBlur(true);
									}}
								>
								</TextareaItem>)
						}
						{tips && <p className="tipsStyle" style={{ margin: 0 }}>{tips}</p>}
					</div>
				</div>
			</div>
		)
	}
}